<template>
	<div class="container">
		<!-- 搜索框 -->
		<el-button :icon="Search" round style="width: 100%;">搜索</el-button>

		<!-- 轮播 -->
		<div class="lunbo">
			<el-carousel height="150px">
				<el-carousel-item v-for="item in 3" :key="item" style="width: 100%;">
					<div class="carousel-item">
						<div v-if="item === 1" class="item-background"
							style="background-image: url('/static/shouye/肇庆.jpg');"></div>
						<div v-else-if="item === 2" class="item-background"
							style="background-image: url('/static/shouye/七星岩.jpg');"></div>
						<div v-else class="item-background" style="background-image: url('/static/shouye/街景.jpg');">
						</div>
					</div>
				</el-carousel-item>
			</el-carousel>
		</div>

		<!-- 四个功能 -->
		<div class="four">
			<div>
				<el-button :icon="TrendCharts" size="large" circle class="custom-button" @click="goToSuyuan" />
				溯源
			</div>
			<div>
				<el-button :icon="Histogram" size="large" circle class="custom-button" @click="goToCompare" />
				对比
			</div>
			<div>
				<el-button :icon="Management" size="large" circle class="custom-button" @click="goToHistory" />
				历史
			</div>
			<div>
				<el-button :icon="CameraFilled" size="large" circle class="custom-button" style="font-size: 23px;" />
				AR
			</div>
		</div>

		<!-- 攻略 -->
		<el-scrollbar class="hide-scrollbar">
			<div class="scrollbar-flex-content">
				<div v-for="item in 5" :key="item" class="scrollbar-demo-item">
					<div class="carousel-item">
						<div v-if="item === 1" class="item-background"
							style="background-image: url('/static/shouye/1.jpg');border-radius: 10px;"></div>
						<div v-else-if="item === 2" class="gonglue" @click="goToTiezi1">
							<el-text tag="b" style="font-size: 18px;">肇庆两日游 I 这些打卡点藏不住了！</el-text>
							<div style="display: flex; justify-content: center; align-items: center; margin: 10px;">
								<div class="card">
									<img src="/static/shouye/2_1.jpg" alt="City Street">
								</div>
								<div class="card1">
									<img src="/static/shouye/2_2.jpg" alt="City Street 2">
								</div>
							</div>
						</div>
						<div v-else-if="item === 3" class="gonglue" @click="goToTiezi2">
							<el-text tag="b" style="font-size: 18px;">千年砚韵，山水诗画</el-text>
							<div style="display: flex; justify-content: center; align-items: center; margin: 10px;">
								<div class="card">
									<img src="/static/shouye/3_1.jpg" alt="City Street">
								</div>
								<div class="card1">
									<img src="/static/shouye/3_2.jpg" alt="City Street 2">
								</div>
							</div>
						</div>
						<div v-else-if="item === 4" class="gonglue">
							<el-text tag="b" style="font-size: 18px;">gogogo，我要去肇庆了！</el-text>
							<div style="display: flex; justify-content: center; align-items: center; margin: 10px;">
								<div class="card">
									<img src="/static/shouye/4_1.jpg" alt="City Street">
								</div>
								<div class="card1">
									<img src="/static/shouye/4_2.jpg" alt="City Street 2">
								</div>
							</div>
						</div>
						<div v-else class="gonglue">
							<el-text tag="b" style="font-size: 18px;">肇庆慢性记 I 一半山水半城诗</el-text>
							<div style="display: flex; justify-content: center; align-items: center; margin: 10px;">
								<div class="card">
									<img src="/static/shouye/5_1.jpg" alt="City Street">
								</div>
								<div class="card1">
									<img src="/static/shouye/5_2.jpg" alt="City Street 2">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-scrollbar>

		<!-- 两个功能 -->
		<el-row :gutter="15">
			<el-col :span="11">
				<div class="grid-content" @click="goToJiyi">
					<img src="/static/shouye/粽子.png" />
					<div class="text">裹蒸技艺</div>
				</div>
			</el-col>
			<el-col :span="11">
				<div class="grid-content">
					<img src="/static/shouye/游戏机手柄.png" style="width: 50%;" />
					<div class="text_1">游戏体验</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
	import {
		TrendCharts,
		Histogram,
		Management,
		CameraFilled,
		Search,
	} from '@element-plus/icons-vue'

	import { useRouter } from 'vue-router'

	const router = useRouter()

	const goToSuyuan = () => {
		router.push('/pages/index/suyuan')
	}

	const goToCompare = () => {
		router.push('/pages/index/compare')
	}
	const goToHistory = () => {
		router.push('/pages/index/history')
	}
	const goToTiezi1 = () => {
		router.push('/pages/tiezi1/tiezi1')
	}
	const goToTiezi2 = () => {
		router.push('/pages/tiezi2/tiezi2')
	}

	const goToJiyi = () => {
		router.push('/pages/jiyi/jiyi')
	}
</script>

<style scoped>
	.container {
		width: 90%;
		margin: 10px auto 0px auto;
	}

	/* 轮播start */
	.lunbo {
		margin: 12px 3px;
		width: 100%;
	}

	.carousel-item {
		width: 100%;
		height: 100%;
	}

	.item-background {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
	}

	/* 轮播end */

	/* 四个 start */
	.four {
		margin: 0 7px;
		display: flex;
		justify-content: center;
		gap: 25px;
		text-align: center;
	}

	.four>div {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
	}

	.custom-button {
		width: 50px !important;
		height: 50px !important;
		font-size: 20px;
	}

	/* 四个 end */

	/* 攻略start */

	.hide-scrollbar::-webkit-scrollbar {
		display: none;
		/* 隐藏滚动条 */
	}

	.hide-scrollbar {
		-ms-overflow-style: none;
		/* IE 和 Edge */
		scrollbar-width: none;
		/* Firefox */
		overflow-x: hidden;
		/* 隐藏横向滚动条 */
	}

	.scrollbar-flex-content {
		margin: 10px 0;
		display: flex;
		width: fit-content;
	}

	.scrollbar-demo-item {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 170px;
		height: 150px;
		margin: 10px 12px;
		border-radius: 10px;
		background-color: #f0f0f0;
	}

	.gonglue {
		padding: 10px;
	}

	.card {
		width: 60px;
		height: 60px;
		background-color: white;
		padding: 2px;
		border-radius: 15px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		position: relative;
		transform: rotate(15deg);
	}

	.card1 {
		width: 60px;
		height: 60px;
		background-color: white;
		padding: 2px;
		border-radius: 15px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		position: relative;
		transform: rotate(345deg);
	}

	.card img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform-origin: center;
		border-radius: 15px;
	}

	.card1 img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform-origin: center;
		border-radius: 15px;
	}

	/* 攻略end */

	/* 两个功能start */
	.el-row {
		margin: 0 25px;
		justify-content: center;
	}

	.el-col {
		border-radius: 4px;
	}

	.grid-content {
		background-color: #f0f0f0;
		border-radius: 10px;
		height: 80px;
		margin: 0 0 10px 0;
		position: relative;
	}

	.text {
		position: absolute;
		top: 10px;
		right: 10px;
		font-weight: 700;
	}

	.text_1 {
		position: absolute;
		bottom: 10px;
		right: 10px;
		font-weight: 700;
	}

	/* 两个功能end */
</style>